<template>
  <div class="comment-card-wrapper">
    <h2 class="title">评论</h2>

    <div class="write-comment clearfix">
      <div class="avatar-wrapper">
        <img :src="userAvatarUrl" alt="avatar">
      </div>
      <text-area class="comment-input" v-model:value="commentContent"></text-area>
    </div>

    <div class="submit-wrapper">
      <button class="submit-comment"
      @click="submitComment">评论</button>
    </div>

    <ul class="comment-list">
      <li v-for="(comment, idx) in comments" :key="idx">
        <CommentItem :comment="comment" :contentType="contentType"></CommentItem>
      </li>
      <li ref="commentLoading"></li>
    </ul>
  </div>
</template>

<script>
import TextArea from '@c/utils/Input/TextArea.vue';
import CommentItem from './CommentItem.vue';

  export default {
    components: {
      TextArea,
      CommentItem
    },
    props: {
      comments: {
        type: Array,
        default: () => []
      },
      contentType: {
        type: String,
        default: () => ""
      }
    },
    data() {
      return {
        commentContent: ''
      }
    },
    computed: {
      userInfos() {
        return this.$store.state.user.infos;
      },
      userAvatarUrl() {
        return this.userInfos.avatar
        ? this.$baseURL + this.userInfos.avatar
        : this.$baseURL + this.$defaultAssetUrls.avatar;
      }
    },
    methods: {
      submitComment() {
        if(this.commentContent === '') return;
        this.$emit('submitComment', this.commentContent);
        this.commentContent = '';
      },
      routeToAuthor(author_id) {
        this.$router.push(`/author/${author_id}/profile`);
      },
    },
    mounted () {
      this.$scrollLoad({
        loadingComponent: this.$refs.commentLoading,
        callback: entries => {
          let entry = entries[0];
          if(entry.isIntersecting) {
            this.$emit('fetchComments');
          }
        }
      })
    },
  }
</script>

<style lang="less" scoped>
@w: var(--commentCardWidth);

.comment-card-wrapper {
  box-sizing: border-box;
  width: @w;
  min-height: 200px;
  background-color: white;
  padding: calc(@w / 40) calc(@w / 20);
  font-size: calc(@w * 0.03);

  .write-comment {
    --a: calc(@w * 0.06);

    margin: calc(@w * 0.02) 0;

    display: flex;
    justify-content: space-between;
    
    .avatar-wrapper {
      width: calc(@w * 0.1);

      img {
        display: block;

        width: var(--a);
        height: var(--a);
        border-radius: 50%;
      }
    }

    .comment-input {
      --textAreaWidth: calc(@w * 0.8);
      --textAreaHeight: 100px;
    }
  }

  .submit-wrapper {
    text-align: right;
    border-bottom: 1px solid var(--light);

    .submit-comment {
      --w: @w;
      --fs: calc(var(--w) * 0.025);
      margin-bottom: var(--fs);
      width: calc(var(--fs) * 6);
      height: calc(var(--fs) * 2);
      border-radius: calc(var(--fs) * 0.4);
      line-height: 1.5;
      font-size: var(--fs);
      background-color: var(--blue);
      color: white;

      &:hover {
        background-color: var(--darkBlue);
      }
    }
  }

  .comment-list {

    li:not(:last-child) {
      --commentItemWidth: @w;
    }
  }
}
</style>